$(function(){
	window.onload = function(){
		var lrc = document.getElementById("txt").value;
		var player = document.getElementById("lrc2");
		var aud = document.getElementById("audio");
		var btn = document.getElementsByClassName("btn");
		var str = '';
		var arrLrc = lrc.split("[");
		for(var i = 1; i < arrLrc.length; i++){
			var listLrc = arrLrc[i].split("]");
			var time = listLrc[0].split(".")[0].split(":");
			var times = time[0]*60 + time[1]*1;
			str += '<p id=n'+ times +'>' +listLrc[1] + '</p>';
		}
		player.innerHTML = str;
		aud.addEventListener("timeupdate",function(){				
			var j = 0;
			var sec = parseInt(aud.currentTime);
			var op = document.getElementById("n"+sec);
			var	oP = player.getElementsByTagName("p");
			if(Math.floor(aud.currentTime) == Math.floor(aud.duration)){
				$("div.markR").addClass("close").removeClass("opened");	
				$(".btn").eq(3).css("display","block");
				$("div.markR img").css("opacity","1");
				$("#log").css("display","none");
				$(".btn").eq(1).animate({"backgroundPosition":"-245px -38px"},1000,function(){
					window.location.reload();
				});
			}
			if(op){
				op.style.color = "aqua";
				op.style.fontSize = "20px";
				if(op.previousSibling){
					op.previousSibling.style.color = "#fff";
					op.previousSibling.style.fontSize = "16px";
				}
				for(j = 0; j < oP.length; j++){	
					oP[j].index = j;
					if(oP[j].style.color == "aqua"){
						player.style.top = 131-(j*op.offsetHeight) + "px";
					}
				}
			}		
		})
		//开关
		$(".btn").eq(1).click(function(){
			if(aud.paused){
				aud.play();
				$(this).css("backgroundPosition","-351px -39px");	
			}else{				
				aud.pause();	
				$("div.markR").addClass("close").removeClass("opened");
				$(this).animate({"backgroundPosition":"-245px -38px"},1100,function(){
					$(".btn").eq(3).css("display","block");	
				});
				$("div.markR>img").animate({"opacity":"1"},100,function(){
					$("#log").css("display","none");
					$("#vol").css("display","none");
					$("#volume").css("display","none");
					
				});
			}
		})
		$(".btn").eq(3).click(function(){
			aud.play();
			$("div.markR>img").animate({"opacity":"0"},1000,function(){
				$("#log").css("display","block");
				$("#vol").css("display","block");
				$("#volume").css("display","block");				
			});
			$("div.markR").removeClass("close").addClass("opened");
			$(".btn").eq(1).css({"backgroundPosition":"-351px -39px"});
			$(this).css({"display":"none"});
		})
		//进度条拖拽
		var drag = document.getElementById("drag");
		var pro = document.getElementById("pro");
		var scroll = document.getElementById("scroll");
		drag.onmousedown = function(evt){
			var e = evt || window.event;
			e.preventDefault();
			e.stopPropagation();
			e.cancelBubble = true;
			var x = e.clientX - drag.offsetLeft;
			document.onmousemove = function(evt){
				var e1 = evt || window.event;
				e1.preventDefault();
				e1.stopPropagation();
				e1.cancelBubble = true;
				var left = e1.clientX - x;
				if(left < 0){
					left = 0;
				}else if(left >　scroll.clientWidth - drag.clientWidth){
					left = scroll.clientWidth - drag.clientWidth;
				}
				drag.style.left = left + "px";
				pro.style.width = (10 + left) + "px";
				var per2 = left/(scroll.clientWidth - drag.clientWidth);
				aud.currentTime = per2 * aud.duration;
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmousedown = null;
			};
		};	
		//点击更改进度
		scroll.onmousedown = function(evt){
			var e2 = evt || window.event;
			e2.stopPropagation();
			e2.cancelBubble = true;
			var left = e2.offsetX;
			drag.style.left = left + "px";
			pro.style.width = (10 + left) + "px";
			var per2 = left/(scroll.clientWidth - drag.clientWidth);
			aud.currentTime = per2 * aud.duration;
		};	
		
		setInterval(function(){
			var per = aud.currentTime/aud.duration;
				drag.style.left = per * (scroll.clientWidth - drag.clientWidth) + "px";	
				pro.style.width = 10 + per * (scroll.clientWidth - drag.clientWidth) + "px";	
		},1000)
		//音量调节
		var vol = document.getElementById("vol");
		var volMax = document.getElementById("volume");
		var volDrag = document.getElementById("dot");
		volDrag.onmousedown = function(evt){
			var e = evt || window.event;
			e.preventDefault();
			e.stopPropagation();
			e.cancelBubble = true;
			var y = e.clientY - volDrag.offsetTop;
			document.onmousemove = function(evt){
				var e1 = evt || window.event;
				e1.preventDefault();
				e1.stopPropagation();
				e1.cancelBubble = true;
				var top = e1.clientY - y;
				if(top < 0){
					top = 0;
				}else if(top >　volMax.clientHeight - volDrag.clientHeight){
					top = volMax.clientHeight - volDrag.clientHeight;
				}
				volDrag.style.top = top + "px";
				var per3 = top/(volMax.clientHeight - volDrag.clientHeight);
				aud.volume =1 - (per3 * 1);
				aud.muted = false;
			};
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmousedown = null;
			};
		};
		aud.volume = 0.5;
		volDrag.style.top = 40*(1-aud.volume) + "px";
		//静音
		var save = "";
		$("#vol").click(function(){
			if(aud.muted){
				aud.muted = false;
				volDrag.style.top = save;
				$(this).css("background-image","url(img/img/vol.png)")
			}else{
				save = volDrag.style.top;
				aud.muted = true;
				volDrag.style.top = 40 + "px";
				$(this).css({"background-image":"url(img/img/vol0.png)"})
			}
		})
	}
})